<template>
    <div class="EditorDesign">
        <div class="EditorDesign-com_header">
            <div class="EditorDesign-com_header-title">
                <span class="EditorDesign-com_header-title__name">{{ selectedComSchema?.text }}</span>
            </div>
        </div>
        <div class="EditorDesign-form">
            <SchemaForm
                :selectedComSchema="selectedComSchema"
            />
        </div>
    </div>
</template>

<script setup>
import {
  reactive,
  toRefs,
} from 'vue';

import useCom from '@/store/com';

import SchemaForm from './SchemaForm.vue';

const comStore = useCom();
const { selectedComSchema } = toRefs(comStore);
</script>

<style lang="less" scoped>
.EditorDesign{
    width: 376px;
    position: absolute;
    padding-bottom: 100px;
    top: 56px;
    right: 0;
    overflow-x: hidden;
    overflow-y: auto;
    bottom: 0;
    background: #fff;
    &-com_header{
        padding: 24px 16px;
        border-bottom: 1px solid #f2f4f6;
        &-title{
            display: flex;
            align-items: center;
            &__name{
                margin-right: auto;
                font-size: 18px;
                font-weight: 600;
                line-height: 24px;
                color: #323233;
                text-align: left;
            }
        }
    }
}
</style>